<!-- 物业汇总 -->
<template>
    <div class="zs-table-page-container">
        <TableSearch @onSearch="search" :menuKey="menuKey" :pageKey="pageKey" :type="'1'">
        </TableSearch>
        <div class="zs-card zs-table-page-content">
            <hsTableV2 class="db-table-self-tootip" isMultistageHeader :columns="tableData.cloumns" :data="tableData.data" fixed
                :multistageHeaderData="multistageData" :rowClassFun="tableData.rowClass" :key="test">
            </hsTableV2>
            <div class="zs-text-gray-dark zs-text-sm zs-space-top">*整体数据包括基础物业1+商业物业+外拓物业+经营业务+香港顾问费。</div>
        </div>
    </div>

    <ProjectAllListDesDialog v-if="isShowDrawer" :isShow="isShowDrawer" :projectCode="projectCode" @close="closeDrawer">
    </ProjectAllListDesDialog>
</template>

<style>
.dashboard-property-project-row-level-three {
   background: #FCF2EE !important;
}
.dashboard-property-projectAll-row-not-title {
   background: #FFFFFF !important;
}

.dashboard-property-projectAll-row-border {
    border-top: 1px solid #b9bac0
}

.dashboard-property-projectAll-row-header {
    height: 30px;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.dashboard-property-projectAll-tab-gray {
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid #cccccc;
    font-size: 10px;
    text-align: center;
    color: #999999;
    margin-left: 6px;
}
.dashboard-property-projectAll-row-btns {
    margin-right: -4px;
}

.dashboard-property-sm-text-gray {
    font-size: 12px;
    color: #999999;
    font-weight: lighter;
}
</style>

<script setup>
import ProjectAllListDesDialog from '@/views/Property/dialog/projectAllListDesDialog.vue'
import TableSearch from '@/views/Property/component/tableAllSearch'
import projectListApi from '@/api/Property/projectList'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()

let test = ref(0)

const menuKey = ref('901_wuye_huizong')
const pageKey = ref('page_903_wuyexiangmu_wuyehuizong')

let searchCom = ref({})
let loading = ref(false)

let curParentIndex = ref(0)

const windowWidth = document.documentElement.scrollWidth;
let celWidth = (windowWidth - 138 - 420) / 10
celWidth = celWidth > 115 ? celWidth : (windowWidth - 138 - 420 - 115) / 9
let tableData = ref({
    loading: false,
    data: [],
    cloumns: [
        {
            key: "target_name",
            dataKey: "target_name",
            title: "指标",
            width: 420,
            align: "left",
            // flexGrow: 1,
            // minWidth: 300,
            cellRenderer: ({ rowData, rowIndex }) => (
                rowData.managementAreaName && rowData.standardName ?
                    <div class={rowData.isTitle ? 'dashboard-property-projectAll-row-header' : 'zs-space-left-bg'} onClick={() => { goDetail(rowIndex) }}>
                        {rowData.target_name}
                        <span class="dashboard-property-sm-text-gray">{rowData.uiTargetGray}</span>
                        <span class={'dashboard-property-projectAll-tab-gray'}>{rowData.managementAreaName}</span>
                        <span class={'dashboard-property-projectAll-tab-gray'}>{rowData.standardName}</span>
                    </div>
                    :
                    rowData.managementAreaName && !rowData.standardName ?
                        <div class={rowData.isTitle ? 'dashboard-property-projectAll-row-header' : 'zs-space-left-bg'} onClick={() => { goDetail(rowIndex) }}>
                            {rowData.target_name}
                            <span class="dashboard-property-sm-text-gray">{rowData.uiTargetGray}</span>
                            <span class={'dashboard-property-projectAll-tab-gray'}>{rowData.managementAreaName}</span>
                        </div>
                        :
                        !rowData.managementAreaName && rowData.standardName ?
                            <div class={rowData.isTitle ? 'dashboard-property-projectAll-row-header' : 'zs-space-left-bg'} onClick={() => { goDetail(rowIndex) }}>
                                {rowData.target_name}
                                <span class="dashboard-property-sm-text-gray">{rowData.uiTargetGray}</span>
                                <span class={'dashboard-property-projectAll-tab-gray'}>{rowData.standardName}</span>
                            </div>
                            :
                            <div class={rowData.isTitle ? 'dashboard-property-projectAll-row-header' : 'zs-space-left-bg'} >
                                {rowData.target_name}
                                <span class="dashboard-property-sm-text-gray">{rowData.uiTargetGray}</span>
                            </div>
            )
        },
        // 1-当前月
        {
            key: "acc_month_budget",
            dataKey: "acc_month_budget",
            title: "预算",
            align: "right",
            width: celWidth,
            parentKey: 'multCol1',
            cellRenderer: ({ rowData }) => (
                rowData.acc_month_budget && 
                (<div class="db-slef-tooltip">
                    <span class="db-tooltip-txt">{rowData.acc_month_budget}</span>
                    <div class="db-tooltip-content-top">{rowData.acc_month_budget_two}</div>
                </div>)
            )
        },
        {
            key: "acc_month_actual",
            dataKey: "acc_month_actual",
            title: "实际",
            align: "right",
            width: celWidth,
            parentKey: 'multCol1',
            cellRenderer: ({ rowData }) => (
                rowData.acc_month_actual && 
                (<div class="db-slef-tooltip">
                    <span class="db-tooltip-txt">{rowData.acc_month_actual}</span>
                    <div class="db-tooltip-content-top">{rowData.acc_month_actual_two}</div>
                </div>)
            )
        },
        {
            key: "acc_month_rate",
            dataKey: "acc_month_rate",
            title: "完成率",
            align: "right",
            width: celWidth,
            parentKey: 'multCol1',
            cellRenderer: ({ rowData }) => (
                rowData.acc_month_rate && 
                (<div class="db-slef-tooltip">
                    <span class={{'zs-text-red': rowData.acc_month_rate_color == '1', 'zs-text-green': rowData.acc_month_rate_color == '3', 'db-tooltip-txt': true}}>{rowData.acc_month_rate}</span>
                    <div class="db-tooltip-content-top">{rowData.acc_month_rate}</div>
                </div>)
            )
        },
        {
            key: "acc_month_yoy",
            dataKey: "acc_month_yoy",
            title: "同比",
            align: "right",
            width: celWidth,
            parentKey: 'multCol1',
            cellRenderer: ({ rowData }) => (
                rowData.acc_month_yoy && 
                (<div class="db-slef-tooltip">
                    <span class="db-tooltip-txt">{rowData.acc_month_yoy}</span>
                    <div class="db-tooltip-content-top">{rowData.acc_month_yoy}</div>
                </div>)
            )
        },
        {
            key: "acc_month_actual_gap",
            dataKey: "acc_month_actual_gap",
            title: "缺口",
            align: "right",
            width: celWidth,
            parentKey: 'multCol1',
            cellRenderer: ({ rowData }) => (
                rowData.acc_month_actual_gap && 
                (<div class="db-slef-tooltip">
                    <span class="db-tooltip-txt">{rowData.acc_month_actual_gap}</span>
                    <div class="db-tooltip-content-top">{rowData.acc_month_actual_gap_two}</div>
                </div>)
            )
        },
        {
            key: "standard_name",
            dataKey: "standard_name",
            title: "标准",
            align: "right",
            width: celWidth,
            parentKey: 'multCol1',
            cellRenderer: ({ rowData }, emptyMark) => {
                if (rowData.standard_name) {
                    return <div class="db-slef-tooltip">
                        <span class="db-tooltip-txt">{rowData.standard_name}</span>
                        <div class="db-tooltip-content-top">{rowData.standard_name}</div>
                    </div>
                } else {
                    return <span>{rowData.isTitle ? '' : emptyMark}</span>
                }
            }
        },
        {
            key: "benchmarking",
            dataKey: "benchmarking",
            title: "对标",
            align: "right",
            width: celWidth,
            parentKey: 'multCol1',
            cellRenderer: ({ rowData }, emptyMark) => {
                if (rowData.benchmarking) {
                    return <div class="db-slef-tooltip">
                        <span class={{'zs-text-red': rowData.benchmarking_color == '1', 'zs-text-green': rowData.benchmarking_color == '3', 'zs-text-orange': rowData.benchmarking_color == '2', 'db-tooltip-txt': true}}>{rowData.benchmarking}</span>
                        <div class="db-tooltip-content-top">{rowData.benchmarking}</div>
                    </div>
                } else {
                    return <span>{rowData.isTitle ? '' : emptyMark}</span>
                }
            }
        },

        // 本年度
        {
            key: "year_budget",
            dataKey: "year_budget",
            title: "预算",
            align: "right",
            width: celWidth,
            parentKey: 'multCol6',
            cellRenderer: ({ rowData }) => (
                rowData.year_budget && 
                (<div class="db-slef-tooltip">
                    <span class="db-tooltip-txt">{rowData.year_budget}</span>
                    <div class="db-tooltip-content-top">{rowData.year_budget_two}</div>
                </div>)
            )
        },
        {
            key: "year_actual",
            dataKey: "year_actual",
            title: "实际",
            align: "right",
            width: celWidth,
            parentKey: 'multCol6',
            cellRenderer: ({ rowData }) => (
                rowData.year_actual && 
                (<div class="db-slef-tooltip">
                    <span class="db-tooltip-txt">{rowData.year_actual}</span>
                    <div class="db-tooltip-content-top">{rowData.year_actual_two}</div>
                </div>)
            )
        },
        {
            key: "year_rate",
            dataKey: "year_rate",
            title: "完成率",
            align: "right",
            width: celWidth > 115 ? celWidth : 115,
            parentKey: 'multCol6',
            cellRenderer: ({ rowData, rowIndex }) => (
                !rowData.isTitle ?
                    <div class="db-slef-tooltip">
                        <span class="db-tooltip-txt">{rowData.year_rate}</span>
                        <div class="db-tooltip-content-top">{rowData.year_rate}</div>
                    </div>
                    :
                    rowData.curParentIndex == 1 || rowData.curParentIndex == 2 ? '' :
                        <template class={'zs-layout-flex-row zs-layout-items-center dashboard-property-projectAll-row-btns'}>
                            <el-button class="zs-link" link size="small" onClick={() => { goDetail(rowIndex) }}>明细</el-button>
                            <span class="zs-text-gray-light zs-space-left-sm zs-space-right-sm" v-btnPermi={ {permi: 'p_btn_903_wuyexiangmu_wuyehuizong_chakan', isHiden: true} }>|</span>
                            <el-button class="zs-link" link size="small" onClick={() => { openDialog(rowData.projectCode) }} v-btnPermi={ {permi: 'p_btn_903_wuyexiangmu_wuyehuizong_chakan', isHiden: true} }>说明</el-button>
                        </template>
            )
        },
    ],
    rowClass: ({ rowData }) => {
        
        // 灰色 zs-el-table-row-gray 蓝色 db-table-row-blue

        if (rowData.curParentIndex == 1 && rowData.isTitle) {
            return "db-table-row-yellow dashboard-property-projectAll-row-border"
        }
        if (rowData.curParentIndex == 2 && rowData.isTitle) {
            return "db-table-row-blue-dark dashboard-property-projectAll-row-border"
        }
        if (rowData.curParentIndex > 2 && rowData.isTitle) {
            return "dashboard-property-project-row-level-three dashboard-property-projectAll-row-border"
        }
        if (!rowData.isTitle) {
            return "dashboard-property-projectAll-row-not-title";
        }
    },
});

let multistageData = {}
const initMultistageData = (queryTime) => {
    const yearmonth = queryTime ? queryTime : '暂无-暂无'
    const year = yearmonth.split('-')[0]
    let month = yearmonth.split('-')[1]
    month[0] == 0 ? month = month.substring(1, 2) : ''

    multistageData['multCol1'] = {
        key: 'multCol1',
        title: month == 1 ? `${year}年${month}月` : `${year}年1-${month}月`,
        childrenIndex: [1, 2, 3, 4, 5, 6, 7]
    }
    multistageData['multCol6'] = {
        key: 'multCol6',
        title: `${year}年度`,
        childrenIndex: [8, 9, 10]
    }
    test.value++
}
// 整体部分长度
// let allNum = ref(0)
const getAllList = async (value) => {
    loading.value = true
    await projectListApi.propertyCollectDetailListApi({ companyAreaManage: value.companyAreaManage, queryTime: value.queryTime, caliber: value.caliber, menuKey: menuKey.value, pageKey: pageKey.value }).then((res) => {
        if (res.data.code == 200) {
            loading.value = false
            tableData.value.data = []
            res.data.data.map((item, index) => {
                curParentIndex.value = index == 0 ? 1 : 2
                const titleArr = item.projectName.split("（")
                tableData.value.data.push({ target_name: titleArr[0], uiTargetGray: titleArr[1] ? `（${titleArr[1]}` : '', isTitle: true, curParentIndex: curParentIndex.value })
                item.detailList.map(child => {
                    const arr = child.target_name.split("（")
                    child.target_name = arr[0]
                    child.uiTargetGray = arr[1] ? `（${arr[1]}` : ''
                    child.curParentIndex = curParentIndex.value // 设置统一的第一级index， 用于斑马纹
                    tableData.value.data.push(child)
                })
            })

        }
    })
}

const getList = async (value) => {
    curParentIndex.value = 3
    loading.value = true
    await projectListApi.propertyCollectProjectDetailListApi({ ...value }).then((res) => {
        if (res.data.code == 200) {
            loading.value = false
            const list = []
            res.data.data.map(item => {
                curParentIndex.value++
                const titleArr = item.projectName.split("（")
                list.push({ target_name: titleArr[0], uiTargetGray: titleArr[1] ? `（${titleArr[1]}` : '', isTitle: true, curParentIndex: curParentIndex.value, managementAreaName: item.managementAreaName, standardName: item.standardName, projectCode: item.projectCode })
                curParentIndex.value++
                item.detailList.map(detail => {
                    const arr = detail.target_name.split("（")
                    detail.target_name = arr[0]
                    detail.uiTargetGray = arr[1] ? `（${arr[1]}` : ''
                    detail.curParentIndex = curParentIndex.value // 设置统一的第一级index， 用于斑马纹
                    list.push(detail)
                })
            })
            tableData.value.data = tableData.value.data.concat(list)
        }
    })
}

const search = async (value) => {
    searchCom.value = JSON.parse(JSON.stringify(value))
    loading.value = true

    // 搜索条件 项目名称 标准 城市 未选择的时候 才搜索【整体】 
    if (value.data.projectCode.length == 0 && value.data.standard.length == 0 && value.data.city.length == 0) {
        await getAllList(value.data)
    } else {
        // 清空数据
        tableData.value.data = []
    }
    getList(value.data)
    initMultistageData(value.data.queryTime)
}

const goDetail = (rowIndex) => {
    if (tableData.value.data[rowIndex + 1]) {
        const data = tableData.value.data[rowIndex + 1]
        router.push({
            path: '/page/routeController/index',
            query: {
                rid: 'Property/PropertyDashBoardBudgetcAhievement',
                rTitle: '预算对标',
                projectCode: data.project_code,
                menuKey: '901_wuye_xiangmu',
                pageKey: 'page_903_wuyexiangmu_wuyexiangmu',
                yearmonth: data.yearmonth
            },
        })
    }
}

// 【说明】抽屉相关
let projectCode = ref('')
let isShowDrawer = ref(false)
const openDialog = (code) => {
    projectCode.value = code
    isShowDrawer.value = true
}
const closeDrawer = (data) => {
    isShowDrawer.value = data.isShow
}


</script>
  

<!-- <template>
    <div class="zs-table-page-container" v-loading="loading">
        <TableSearch @onSearch="search" :menuKey="menuKey" :pageKey="pageKey">
        </TableSearch>
        <div class="zs-card zs-table-page-content">
            <el-auto-resizer>
                <template #default="{ height, width }">
                    <el-table-v2 v-if="tableData.data.length > 2" ref="tableRefProjectAllList" v-loading="tableData.loading"
                        class="zs-el-table-v2" :row-height="36" :header-height="72" :row-class="tableData.rowClass"
                        header-class="zs-el-table-v2-header" :columns="tableData.cloumns" :data="tableData.data"
                        :width="width" :height="height" fixed>
                        <template #header="props">
                            <CustomizedHeader v-bind="props" />
                        </template>
                    </el-table-v2>
                    <div class="zs-layout-flex-col zs-layout-items-center" v-else>
                        <img :src="noData" style="width: 100px" />
                        <div class="zs-text-gray zs-space-top">暂无数据</div>
                    </div>
                </template>
            </el-auto-resizer>
        </div>
    </div>
</template>
<script setup>
import noData from '@/assets/noData.png'
import TableSearch from '@/views/Property/component/tableSearch'
import projectListApi from '@/api/Property/projectList'
import { ref, watch } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()

const menuKey = ref('901_wuye_huizong')
const pageKey = ref('page_903_wuyexiangmu_wuyehuizong')

let searchCom = ref({})
let loading = ref(false)

// 设置虚拟表格滚动
const tableRefProjectAllList = ref()
watch(() => router.currentRoute.value, () => {
    tableRefProjectAllList.value?.scrollToTop(0)
})
let isSearchALl = ref(true)
let curIndex = ref(0)
const getAllList = async () => {
    loading.value = true
    await projectListApi.propertyCollectDetailListApi({ companyAreaManage: '整体', menuKey: menuKey.value, pageKey: pageKey.value }).then((res) => {
        if (res.data.code == 200) {
            loading.value = false
            curIndex.value++
            res.data.data.map(item => {
                item.curIndex = curIndex.value
            })
            tableData.value.data = res.data.data
            tableData.value.data.unshift({ target_name: '整体', isTitle: true, curIndex: curIndex.value })
        }
    })
}

const getList = async (value) => {
    loading.value = true
    await projectListApi.propertyCollectProjectDetailListApi({ ...value }).then((res) => {
        if (res.data.code == 200) {
            loading.value = false
            const list = []
            res.data.data.map(item => {
                curIndex.value++
                list.push({ target_name: item.projectName, isTitle: true, curIndex: curIndex.value })
                item.detailList.map(detail => {
                    detail.curIndex = curIndex.value
                    list.push(detail)
                })
            })

            tableData.value.data = isSearchALl.value ? tableData.value.data.concat(list) : list

        }
    })
}

const search = async (value) => {
    curIndex.value = 0
    searchCom.value = JSON.parse(JSON.stringify(value))
    loading.value = true

    // 搜索条件只选择了【整体】时，才搜索
    if (value.data.projectCode.length == 0 && value.data.standard.length == 0 && value.data.city.length == 0 && value.data.companyAreaManage == '整体') {
        isSearchALl.value = true
        await getAllList()
    } else {
        isSearchALl.value = false
    }
    await getList(value.data)
}

const windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
let tableData = ref({
    loading: false,
    data: [],
    total: 0,
    cloumns: [
        {
            key: "target_name",
            dataKey: "target_name",
            title: "指标",
            width: 300,
            align: "left",
            cellRenderer: ({ rowData }) => (
                <span class={rowData.isTitle ? '' : 'zs-space-left-bg'} style={rowData.isTitle ? { fontWeight: '600' } : ''}>{rowData.target_name}</span>
            )
        },
        // 1-当前月
        {
            key: "acc_month_budget",
            dataKey: "acc_month_budget",
            title: "预算",
            align: "right",
            width: (windowWidth - 438) / 7,
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={rowData.acc_month_budget} placement="top">{rowData.acc_month_budget}</ElTooltip>
            )
        },
        {
            key: "acc_month_actual",
            dataKey: "acc_month_actual",
            title: "实际",
            align: "right",
            width: (windowWidth - 438) / 7,
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={rowData.acc_month_actual} placement="top">{rowData.acc_month_actual}</ElTooltip>
            )
        },
        {
            key: "acc_month_rate",
            dataKey: "acc_month_rate",
            title: "完成率",
            align: "right",
            width: (windowWidth - 438) / 7,
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={`${rowData.acc_month_rate}`} placement="top">{rowData.acc_month_rate}</ElTooltip>
            )
        },
        {
            key: "acc_month_yoy",
            dataKey: "acc_month_yoy",
            title: "同比",
            align: "right",
            width: (windowWidth - 438) / 7,
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={`${rowData.acc_month_yoy}`} placement="top">{rowData.acc_month_yoy}</ElTooltip>
            )
        },
        {
            key: "acc_month_actual_gap",
            dataKey: "acc_month_actual_gap",
            title: "缺口",
            align: "right",
            width: (windowWidth - 438) / 7,
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={rowData.acc_month_actual_gap} placement="top">{rowData.acc_month_actual_gap}</ElTooltip>
            )
        },
        // 本年度
        {
            key: "year_budget",
            dataKey: "year_budget",
            title: "预算",
            align: "right",
            width: (windowWidth - 438) / 7,
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={rowData.year_budget} placement="top">{rowData.year_budget}</ElTooltip>
            )
        },
        {
            key: "year_rate",
            dataKey: "year_rate",
            title: "完成率",
            align: "right",
            width: (windowWidth - 438) / 7,
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={`${rowData.year_rate}`} placement="top">{rowData.year_rate}</ElTooltip>
            )
        },
    ],
    rowClass: ({ rowData }) => {
        if (rowData.curIndex % 2 == 0) {
            return "zs-el-table-row-gray";
        }
    },
});

const CustomizedHeader = ({ cells, columns, headerIndex }) => {
    console.log(headerIndex)
    const yearmonth = tableData.value.data[1].yearmonth
    const year = yearmonth.split('-')[0]
    let month = yearmonth.split('-')[1]
    month[0] == 0 ? month = month.substring(1, 2) : ''

    const groupCells = [];
    for (let i = 0, len = columns.length; i < len; i++) {
        if (i == 1) {
            const title = `${year}年1-${month}月`
            const width = cells[i].props.column.width + cells[i + 1].props.column.width + cells[i + 2].props.column.width + cells[i + 3].props.column.width + cells[i + 4].props.column.width;
            groupCells.push(
                <div style={{ width: `${width}px`, borderLeft: '1px solid #ffffff', borderRight: '1px solid #ffffff', }}>
                    <div style={{ width: `${width}px`, height: '36px', background: '#f5f4f5', borderRight: '1px solid #ffffff', borderBottom: '1px solid #ffffff', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>{title}</div>
                    <div style="display:flex; height: 36px">{cells[i]}{cells[i + 1]}{cells[i + 2]}{cells[i + 3]}{cells[i + 4]}</div>
                </div >)
            i = i + 4
        } else if (i == 6) {
            const title = `${year}年度`
            const width = cells[i].props.column.width + cells[i + 1].props.column.width;
            groupCells.push(
                <div style={{ width: `${width}px`, borderLeft: '1px solid #ffffff', borderRight: '1px solid #ffffff', }}>
                    <div style={{ width: `${width}px`, height: '36px', background: '#f5f4f5', borderRight: '1px solid #ffffff', borderBottom: '1px solid #ffffff', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>{title}</div>
                    <div style="display:flex; height: 36px">{cells[i]}{cells[i + 1]}</div>
                </div >)
            i = i + 2
        }
        else { groupCells.push(cells[i]) }
    }

    return groupCells;
}

</script>
  

<style scoped lang="scss"></style> -->